<template>
  <div class="WarningTrend-root">
    <formTitleVue
      title="预警趋势"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-WarningTrend"></div> -->
    <myLine domId="jcyj-WarningTrend-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myLine from '@/components/Echarts/myLine.vue';
import {time_select_optios} from '@/utils/global.js';
import {alarmListArea, alarmListAreaWarn} from "@/api/alarm/statistics";

export default {
  name: "WarningTrend",
  components: {
    formTitleVue, myLine,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options: [
            {label: "近一月", value: "近一月"},
            {label: "近半年", value: "近半年"},
            {label: "近一年", value: "近一年"},
          ],
          changeFn: this.selectChange1,
        },
        {
          selectValue: "",
          options: [
            {label: "全部", value: ""},
            {label: "市政设施", value: "1"},
            {label: "房屋建筑", value: "2"},
            {label: "交通设施", value: "3"},
            {label: "在建工地", value: "4"},
            {label: "人员密集区域", value: "5"},
          ],
          changeFn: this.selectChange2,
        },
      ],
      chartsData: {
        xData: ["10", "11", "12", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
        yData: [],
      },
      echartsOption: {
        legend: {
          show: false,
        }
      },
      searChForm: {
        options1: '',
        options2: '',
        startTime: '',
        endTime: '',
        type: '',
        dateType:'',
      },
    };
  },
  methods: {
    selectChange1(item) {
      this.searChForm.options1 = item
      this.searChForm.startTime = time_select_optios[item].startTime +" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime +" 23:59:59"
      this.getData()
    },
    selectChange2(item) {
      this.searChForm.options2 = item
      console.log("----type--" + item)
      this.getData()
    },
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime +" 00:00:00"
      this.searChForm.endTime = time_select_optios[item].endTime +" 23:59:59"
      this.getData()
    },
    getData() {
      // console.log(this.searChForm)
      /*this.chartsData.yData = [{
        name: '总数',
        data: [36, 41, 34, 27, 26, 22, 17, 16, 15, 9, 5, 6]
      },
      ];*/
      this.searChForm.type = this.searChForm.options2

      if(this.searChForm.options1=='近一月' || this.searChForm.options1==''){
        //按天
        this.searChForm.dateType='03'
      }else{
        this.searChForm.dateType=''
      }
      alarmListAreaWarn(this.searChForm).then(res => {
        if (res.code == 200) {
          this.chartsData.yData = res.data.data
          this.chartsData.xData=res.data.xdata
          this.loading = false
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.WarningTrend-root {
  #echarts-WarningTrend {
    height: 30vh;
  }
}
</style>
